
//自定义符号
export default class Symbol {

    constructor() {
        this.width = 200;
        this.height = 200;
        this.data = new Uint8Array(this.width * this.height * 4);
        this.map;
    }

    onAdd(map, gl) {
        var canvas = document.createElement('canvas');
        canvas.width = this.width;
        canvas.height = this.height;
        this.context = canvas.getContext('2d');
        this.map = map;
        this.map.loadImage('http://placekitten.com/50/50', (error, image) => {
            if (error) throw error;
            this.image = image;
        });
        console.log("onadd")
    }

    onRemove(map, gl) {

    }

    render(gl, matrix) {
        console.log("gl")
        var duration = 1000;
        var t = (performance.now() % duration) / duration;

        var radius = (this.width / 2) * 0.3;
        var outerRadius = (this.width / 2) * 0.7 * t + radius;
        var context = this.context;

        // draw outer circle
        context.clearRect(0, 0, this.width, this.height);
        context.beginPath();
        context.arc(
            this.width / 2,
            this.height / 2,
            outerRadius,
            0,
            Math.PI * 2
        );
        context.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')';
        context.fill();
        context.drawImage(this.image, 0, 0, this.width / 2, this.height / 2)
        // draw inner circle
        context.beginPath();
        context.arc(
            this.width / 2,
            this.height / 2,
            radius,
            0,
            Math.PI * 2
        );
        context.fillStyle = 'rgba(255, 100, 100, 1)';
        context.strokeStyle = 'white';
        context.lineWidth = 2 + 4 * (1 - t);
        context.fill();
        context.stroke();

        // update this image's data with data from the canvas
        this.data = context.getImageData(
            0,
            0,
            this.width,
            this.height
        ).data;

        // continuously repaint the map, resulting in the smooth animation of the dot
        this.map.triggerRepaint();

        // return `true` to let the map know that the image was updated
        return true;
    }


}